@layer reset, theme, app, utilities;

@import "tailwindcss/theme.css" layer(theme) prefix(psb);
@import "./imports/reset.css" layer(reset) prefix(psb);
@import "./imports/welcome_page.css" layer(app);
@import "./imports/docs.css" layer(app);

@source "../css/**/*.css";
@source "../js/**/*.js";
@source "../../lib/**/*.{ex,heex}";
@source "../../priv/templates/**/*.{eex,exs}";

@custom-variant dark (&:where(.psb\:dark, .psb\:dark *));

@layer utilities {
  .psb {
    @import "tailwindcss/utilities.css" prefix(psb);
  }
}

@layer theme {
  .psb {
    font-family: ui-sans-serif, system-ui, sans-serif;
    @apply psb:antialiased;
  }

  pre.psb {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      Liberation Mono, Courier New, monospace;
    font-size: 1em;
  }

  .svg-inline--fa.psb {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
  }

  .svg-inline--fa.psb.psb\:hidden {
    display: none;
  }

  .psb-sandbox {
    margin: 0;
    font-family: serif, system-ui, sans-serif;
    @apply psb:w-full;
  }

  .psb-variation-block:hover .psb-open-playground-link {
    display: block !important;
  }

  .psb\:dark ::-webkit-scrollbar {
    @apply psb:bg-slate-900 psb:w-[15px];
  }

  .psb\:dark ::-webkit-scrollbar-thumb {
    @apply psb:bg-slate-700 psb:border-solid psb:border-4 psb:border-transparent psb:rounded-lg psb:bg-clip-content;
  }
}
